<template>
	<view class="content column" :style="{height:winH}">
		<view class="top">
			<view class="titleTop">请为本次服务打分</view>
			<view class="rateBox">
				<uni-rate v-model="rating" @change="onChange" :size="34"></uni-rate>
			</view>
		</view>
		<view class="btm fill column">
			<view class="titleTop">评价内容</view>
			<view class="textarea fill">
				<textarea placeholder="请填写评价内容" v-model="comments" :maxlength="200"/>
			</view>
			<view class="btn-primary" @click="submit">提交评价</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { onLoad } from "@dcloudio/uni-app"
import { swoTicketAppraise } from '@/common/API/bpm'
const winH = ref()
const rating = ref(0)
const comments = ref()
const id = ref()
onLoad((options)=>{
	winH.value = uni.getWindowInfo().windowHeight+"px"
	id.value = options.id
})

const onChange = (e)=> {
	rating.value = e.value
}

const submit = async()=>{
	if(!rating.value){
		uni.showToast({
			title:'请为本次服务打分',
			icon:'none'
		})
	}else if(!comments.value){
		uni.showToast({
			title:'请填写评价内容',
			icon:'none'
		})
	}else{
		let data = {
			id: id.value,
			rating: rating.value,
			comments: comments.value
		}
		let res = await swoTicketAppraise(data)
		uni.showToast({
			title:'评价成功'
		})
		setTimeout(()=>{
			uni.navigateBack()
		},2000)
	}
}
</script>

<style lang="scss" scoped>
.content{
	padding: 16rpx 0 0;
	.titleTop{
		text-align: center;
		margin-bottom: 30rpx;
		&::before,&::after{
			content: '';
			display: inline-block;
			vertical-align: middle;
			width: 30rpx;
			height: 2rpx;
			border-top: 2rpx solid #333;
		}
		&::before{
			margin-right: 20rpx;
		}
		&::after{
			margin-left: 20rpx;
		}
	}
	.top{
		background: #fff;
		padding: 32rpx 32rpx 50rpx;
		margin-bottom: 16rpx;
		.titleTop{
			margin-bottom: 14rpx;
		}
		.rateBox{
			width: 340rpx;
			margin: 0 auto;
		}
	}
	.btm{
		background: #fff;
		padding: 32rpx 32rpx 50rpx;
		.textarea{
			uni-textarea{
				width: 100%;
				height: 240rpx;
				padding: 16rpx;
				box-sizing: border-box;
				font-size: 28rpx;
				background: #F5F5F5;
			}
			.num{
				text-align: right;
				color: #717171;
			}
		}
		.btn-primary{
			width: 100%;
			border-radius: 200rpx;
		}
	}
}
</style>
